import axios from 'axios'
import qs from 'qs'
import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { Locales } from '../Locales/locales'

import 'antd/dist/antd.css'
import './App.css'
import CPUState from './cpu'
import BaseMonitor from './base'
import DiskState from './disk'
import MemoryState from './memory'
import NetWorkState from './network'
import { DownOutlined } from '@ant-design/icons'

import {
    Alert,
    Button,
    Card,
    Col,
    Dropdown,
    Layout,
    Menu,
    PageHeader,
    Row,
    Spin
} from 'antd'

export default class MainFrame extends Component {

    state = {
        isOK: false,
        init: false,
        monitor: {}
    }

    base = ["now", "uptime", "user", "hostname", "port", "ip"]
    advance = ["memory", "cpu", "stat", "loadavg", "net", "cpufreq"]
    extend = ["disk", "temp"]

    getData = (v) => {

        axios.post('/api/monitor/api.php',
            qs.stringify({
                "v": v
            }))
            .then((d) => {
                //第一次请求数据时，初始化now
                if (this.state.init === false) {
                    this.setState({
                        now: d.data.now
                    })
                }

                this.setState({
                    isOK: true,
                    init: true,
                    monitor: { ...this.state.monitor, ...d.data }
                })
            })
            .catch((d) => {
                console.log(d)
                this.setState({
                    isOK: false,
                    init: true
                })
            })
    }

    componentDidMount() {
        let argv = []

        if (!this.state.init) {
            argv = [...this.base, ...this.advance, ...this.extend]
            this.getData(encodeURI(JSON.stringify(argv)))
        }

        this.Inter = setInterval(() => {
            let { now } = this.state
            now++
            this.setState({ now })

            if (this.state.now % 10 === 0) {
                argv = [...this.advance, ...this.extend]
            } else {
                argv = [...this.advance]
            }
            this.getData(encodeURI(JSON.stringify(argv)))

        }, 1000)
    }

    handleLocale = (e) => {
        let { key } = e
        key = key.match(/\w+:([\w-]+)/i)[1]
        this.props.changeLocale(key)
    }

    render() {

        if (!this.state.isOK) {

            //数据未初始化时，则显示初始化界面
            let { szTip, szMessage, szDescription, szType } = ""
            if (!this.state.init) {
                szTip = <FormattedMessage id="LoadTip" />
                szMessage = <FormattedMessage id="LoadMessage" />
                szDescription = <FormattedMessage id="LoadDescription" />
                szType = "info"
            } else {
                szTip = <FormattedMessage id="LoadErrorTip" />
                szMessage = <FormattedMessage id="LoadErrorMessage" />
                szDescription = <FormattedMessage id="LoadErrorDescription" />
                szType = "error"
            }
            return (
                <Spin tip={szTip}>
                    <Alert
                        message={szMessage}
                        description={szDescription}
                        type={szType}
                    />
                </Spin>
            )
        }

        const menu = (
            <Menu>
                {
                    Object.keys(Locales).map((item, i) => (

                        <Menu.Item
                            key={i + Locales[item].key}
                            onClick={this.handleLocale}
                        >{Locales[item].translate}</Menu.Item>
                    ))
                }
            </Menu>
        )

        return (

            <Layout style={{ minWidth: 460 }}>
                <PageHeader
                    title="Web Monitor"
                    avatar={{ src: "favicon.ico" }}
                    extra={[
                        <Dropdown overlay={menu} key="LanguageDropDown">
                            <Button>
                                <FormattedMessage id="Language" /> <DownOutlined />
                            </Button>
                        </Dropdown>
                    ]}
                />
                <Layout>
                    <Layout.Content>
                        <Row>
                            <Col xs={24} sm={24} md={8} lg={6} style={{ padding: "2%" }}>

                                <BaseMonitor
                                    time={parseInt(this.state.monitor.now)}
                                    uptime={parseInt(this.state.monitor.uptime)}
                                    user={this.state.monitor.user}
                                    hostname={this.state.monitor.hostname}
                                    ip={this.state.monitor.ip}
                                    port={this.state.monitor.port}
                                />

                            </Col>
                            <Col xs={24} sm={24} md={16} lg={18} style={{ padding: "2%" }}>

                                <Card className="stateCard">
                                    <CPUState
                                        loadavg={this.state.monitor.loadavg}
                                    />
                                </Card>

                                <Card className="stateCard">
                                    <MemoryState
                                        memory={this.state.monitor.memory}
                                    />
                                </Card>

                                <Card className="stateCard">
                                    <DiskState
                                        disk={this.state.monitor.disk}
                                    />
                                </Card>

                                <Card className="stateCard">
                                    <NetWorkState
                                        net={this.state.monitor.net}
                                        time={this.state.now}
                                    />
                                </Card>

                            </Col>
                        </Row>

                    </Layout.Content>
                </Layout>
                <Layout.Footer
                    style={{ textAlign: 'center' }}
                >Web Monitor ©2021 Created by YeLee</Layout.Footer>
            </Layout>
        )
    }
}
